﻿@{
    Layout = null;
    var imgAvatar = Url.Action("ShowMicroAvatar", "Perfil", new { rand = new Random() { }.Next() });
}
<!DOCTYPE html>
<html>
<head>
    <title>Edição de Foto</title>
    <link href="@Url.Content("~/Content/jcrop/jquery.Jcrop.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery.Jcrop.min.js")" type="text/javascript"></script>
    <style type="text/css">
        #cropContainer
        {
            width: 700px;
            padding: 20px;
        }
        #cropPreview
        {
            float: left;
            width: 480px;
            height: 360px;
        }
        #cropDisplay
        {
            float: left;
            margin-left: 20px;
            overflow: hidden;
            width: 200px;
            height: 200px;
        }
        #avatarImageEditor
        {
           /*max-width: 480px;
           max-height: 360px;*/
        }
        #preview
        {
            width: 200px;
            height: 200px;
        }
        #botoesAvatar
        {
            float: left;
            margin-left: 20px;
            margin-top: 20px;
            width: 200px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="cropContainer">
        @Html.Hidden("top")
        @Html.Hidden("left")
        @Html.Hidden("bottom")
        @Html.Hidden("right")
        <div id="cropPreview">
            <img src="@Url.Action("ShowAvatarForEdit", "Perfil", new { rand = new Random() { }.Next() })" id="avatarImageEditor" alt="Avatar" />
        </div>
        <div id="cropDisplay">
            <img src="@Url.Action("ShowAvatarForEdit", "Perfil", new { rand = new Random() { }.Next() })" id="preview" alt="Avatar Preview" />
        </div>
        <div id="botoesAvatar">
            <input type="button" value="Recortar" id="recortar" />
            <input type="button" value="Cancelar" id="cancelarUpload" />
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            $('#recortar').click(function () {
                var t = $('#top').val();
                var l = $('#left').val();
                var b = $('#bottom').val();
                var r = $('#right').val();
                if (t == "" || l == "" || b == "" || r == "") {
                    alert('Por favor selecione a área que será recortada.');
                } else {
                    $.post('@Url.Action("Crop", "Perfil")', { top: t, left: l, bottom: b, right: r }, function (data) {
                        if (data) {
                            parent.incluirAvatar = true;
                            parent.$.fancybox.close();
                            if ($('#Id').val() > 0) {
                                alert("Imagem salva com sucesso!");
                                $('#micro-avatar').attr('src', '@imgAvatar');
                            }
                        } else {
                            alert("Houve um erro no salvamento da imagem...\nPor favor tente novamente.");
                        }
                    });
                }
            });
            $('#cancelarUpload').click(function (e) {
                e.preventDefault();
                $.fancybox.close();
            });
            var jcrop_api, boundx, boundy;
            $('#avatarImageEditor').Jcrop({
                onChange: updatePreview,
                onSelect: updatePreview,
                aspectRatio: 1
            }, function () {
                var bounds = this.getBounds();
                boundx = bounds[0];
                boundy = bounds[1];
                jcrop_api = this;
            });
            function updatePreview(c) {
                if (parseInt(c.w) > 0) {
                    var rx = 200 / c.w;
                    var ry = 200 / c.h;

                    $('#top').val(c.y);
                    $('#left').val(c.x);
                    $('#bottom').val(c.y2);
                    $('#right').val(c.x2);

                    $('#preview').css({
                        width: Math.round(rx * boundx) + 'px',
                        height: Math.round(ry * boundy) + 'px',
                        marginLeft: '-' + Math.round(rx * c.x) + 'px',
                        marginTop: '-' + Math.round(ry * c.y) + 'px'
                    });
                }
            };
        });
    </script>
</body>
</html>
